import React, { useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { defaultDomain } from '@/config/domain';
import HttpRequest from '@/utils/HttpRequest';
import ProTable from '@ant-design/pro-table';
import { StatusView } from '@/pages/topic/StatusView';
import { RouteView } from '@/pages/topic/RouteView';
import { ModifyTopic } from '@/pages/topic/ModifyTopic';
import { ConsumerView } from '@/pages/topic/ConsumerView';
import { SendMessage } from '@/pages/topic/SendMessage';
import { ResetPoint } from '@/pages/topic/ResetPoint';
import { DeleteTopics } from '@/pages/topic/DeleteTopics';

const Topic: React.FC = () => {
  const actionRef=useRef();
  const[dataSource,setDataSource]=useState([]);
  const queryParams = [
    { title: '主题',align:'center',  width: 180, dataIndex: 'topic',
      render: (text: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined) => (
        <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
          {text}
        </div>
      ),
      search: true,valueType:'autoComplete',
      filters: [/*
        {text: '普通', value: '', },
        {text: '重试', value: '%RETRY%', },
        {text: '死信', value: '%DLQ%', },
        {text: '系统', value: 'TBW102', },
        */
      ],

      filterMultiple: false,
      onFilter: (value: any, record: any) => {
      if(value==''){
        return  true;
      }
       return record.topic.indexOf(value) === 0
      },
      options:{dataSource}
    },
    {
      title: '操作', dataIndex: 'action',align:'center', search: false,
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      // @ts-ignore
      render: (dom, record) => {
        return ([
            <StatusView key={'statusView'} record={record} />, '  ',

            <RouteView key={'routeView'} record={record} />, '  ',

            <ConsumerView key={'consumerView'} record={record} />, '  ',

            <ModifyTopic key={'modifyView'} record={record} />, '  ',

            <SendMessage key={'sendMsgView'} record={record} />, '  ',

            <ResetPoint key={'resetPoint'} record={record} />, '  ',

            <DeleteTopics key={'deleteTopics'} record={record}  action={actionRef.current}/>, '  ',
          ]
        );
      },

    },
  ];


  // @ts-ignore
  return (
    <PageContainer key='pc'>
      <ProTable
        rowKey='topic'
        search={{ labelWidth: 'auto' }}
        scroll={{ x: 800 }}
        pagination={{ pageSize: 20 }}
        toolBarRender={false}
        actionRef={actionRef}
        // @ts-ignore
        columns={queryParams}

        request={async (params) => {
          // @ts-ignore
          const searchValue=params.topic;
          const res = await HttpRequest({
            baseURL: defaultDomain,
            url: '/topic/list.query',
            method: 'GET',
            params: params,
          });
          console.log("res=",res);
          // @ts-ignore
          const data = res.data;
          const itemList = data?.topicList;
          const dataList = [];
          // @ts-ignore
          const dList=[];
          if (itemList) {
            for (const i in itemList) {
              let d=itemList[i];
              if(d.startsWith("%SYS%") || d.startsWith("%RETRY%")
                || d.startsWith("RMQ_SYS_TRANS_HALF_TOPIC")
                || d.startsWith("DefaultCluster_REPLY_TOPIC")
                || d.startsWith("SCHEDULE_TOPIC_XXXX")
                || d.startsWith("CID_")
                || d.startsWith("FILTERSRV_CONSUMER")
                || d.startsWith("SELF_TEST_C_GROUP")
                || d.startsWith("SELF_TEST_C_GROUP")
                || d.startsWith("TOOLS_CONSUMER")


              ){
                continue;
              }
              console.log("search value=",searchValue);
              if(searchValue  && searchValue.trim().length>0) {
                const v= itemList[i];
                if(v.toLowerCase().indexOf(searchValue.toLowerCase())>=0) {
                  dataList.push({ topic: itemList[i] });
                  dList.push(itemList[i])
                }
              }else {
                dataList.push({ topic: itemList[i] });
                dList.push(itemList[i])
              }
            }
          }
          // @ts-ignore
          setDataSource(dList);
          return { ...data, data: dataList };
        }}
      />
    </PageContainer>
  );
};


export default Topic;
